/**
 * createPortal()
 *
 *    1. 该方法属于 ReactDOM
 *    2. 该方法用于将组件的一部分模板传送到组件结构之外的其他DOM中去。（Vue3 teleport）
 *
 *    语法
 *      const child = createPortal(child, dom)
 *        1. child - 一段React元素
 *        2. dom - 要传送到的位置，是一个DOM对象
 *
 *      <div>
 *         <p>第一个p标签</p>
 *         {
 *              createPortal(<p>第二个p标签</p>, document.body)
 *          }
 *      </div>
 *
 *    注意：
 *      1. 虽然我们的元素被传送到组件之外，但该元素的渲染作用域还是当前组件的。
 *
 *    案例：
 *      1. 实现一个 Modal 弹窗组件
 *
 */

import { useState } from "react";
import { createPortal } from "react-dom";
import Modal from "./Modal";

function App() {
  const [name, setName] = useState("张三");

  const [showModal, setShowModal] = useState(false);
  return (
    <div>
      <p>第一个p标签</p>
      {createPortal(<p>第二个p标签 - {name}</p>, document.body)}
      <hr />

      {/* 
        当前这个 Modal 弹出没有任何问题，但是如果使用 Modal 组件的代码层级非常的深。
        且外层元素刚好有一些相对定位或固定定位时，会导致我 Modal 的定位出问题。
      */}
      {/* <button onClick={() => setShowModal(true)}>Open</button>
      {showModal && <Modal onClose={() => setShowModal(false)} />} */}

      <div
        style={{ height: 300, border: "1px solid #000", position: "relative" }}
      >
        <button onClick={() => setShowModal(true)}>Open</button>
        {showModal &&
          createPortal(
            <Modal onClose={() => setShowModal(false)} />,
            document.body
          )}
      </div>
    </div>
  );
}

export default App;
